<template>
  <div class="bakimg-view">
    <!-- 城山沟定制化组件 -->
    <img
      class="bakimg-view-img"
      :src="backgroundurlList[backgroundurlIndex].url"
    />
    <div class="bakimg-main">
      <!-- 通用的展示可点击框 -->
      <div
        v-for="(itemone, indexone) in commmonList"
        :key="'k1' + indexone"
        class="k1"
        :style="{ top: itemone.top + '%', left: itemone.left + '%' }"
        @click="showdiamet(itemone)"
      >
        <div class="k1-line">{{ itemone.gardenName }}</div>
      </div>
      <div
        class="k2one"
        :style="{
          top: otherimgList[0].top + '%',
          left: otherimgList[0].left + '%'
        }"
      ></div>
      <div
        class="k2two"
        :style="{
          top: otherimgList[1].top + '%',
          left: otherimgList[1].left + '%'
        }"
      ></div>
      <div
        class="k3"
        :style="{
          top: otherimgList[2].top + '%',
          left: otherimgList[2].left + '%',
          transform: 'rotate(-15deg)'
        }"
      >
        游客中心
      </div>
      <!-- <div
        class="k3"
        :style="{
          top: otherimgList[3].top + '%',
          left: otherimgList[3].left + '%'
        }"
      >
        酒店
      </div> -->
    </div>
    <!-- 弹框一 -->
    <imgdia v-if="isshowdia" :diamessage="diamessage" />
    <!-- 弹框二-展示服务 -->
    <div v-if="isshowdiatwo" class="service-view">
      <imgdiatwo
        v-for="(diatwoitem, diatwoindex) in diamessagetwoList"
        :key="'diatwo' + diatwoindex"
        :diamessagetwo="diatwoitem"
      />
    </div>
  </div>
</template>

<script>
import imgdia from './backimg-dia.vue'
import imgdiatwo from './backimg-diatwo.vue'
import axios from '@/api/axios'
export default {
  name: 'Bakimg',
  components: { imgdia, imgdiatwo },
  props: {
    nowselectbarId: {
      type: Number,
      default: () => {
        return 1
      }
    }
  },
  data() {
    return {
      // 一号弹窗信息
      isshowdia: false,
      diamessage: {},
      // 二号弹窗信息
      isshowdiatwo: false,
      diamessagetwoList: [
        {
          name: '云上漂流',
          date: '02/26 14:38',
          service: '游览服务、游乐设施',
          num: 11300,
          top: 30,
          left: 40
        },
        {
          name: '桃花园',
          date: '2/26 14:38',
          service: '游览服务、自助采摘',
          num: 11300,
          top: 52,
          left: 26
        },
        {
          name: '梨园',
          date: '2/26 14:38',
          service: '游览服务、自助采摘',
          num: 11300,
          top: 66,
          left: 30
        },
        {
          name: '枇杷园',
          date: '2/26 14:38',
          service: '游览服务、自助采摘',
          num: 11300,
          top: 54,
          left: 34
        },
        {
          name: '映山红',
          date: '2/26 14:38',
          service: '游览服务',
          num: 11300,
          top: 43,
          left: 34
        },
        {
          name: '梅园',
          date: '2/26 14:38',
          service: '游览服务',
          num: 11300,
          top: 36,
          left: 52
        },
        {
          name: '山庄',
          date: '2/26 14:38',
          service: '客房服务、餐饮服务',
          num: 11300,
          top: 74,
          left: 65
        },
        {
          name: '茶园',
          date: '2/26 14:38',
          service: '游览服务、游乐设施',
          num: 11300,
          top: 40,
          left: 67
        },
        {
          name: '酒店',
          date: '2/26 14:38',
          service: '游览服务、餐饮服务',
          num: 11300,
          top: 58,
          left: 60
        }
        // {
        //   name:"游客中心",date:"2/26 14:38",service:'游览服务',num:11300,top:50,left:50
        // },
      ],

      // 底部背景
      backgroundurlIndex: 0,
      backgroundurlList: [
        {
          name: '景区',
          url: require('../../assets/templeone/background1.png')
        },
        {
          name: '桃园',
          url: require('../../assets/templeone/background2.png')
        }
      ],
      // 通用图片定位信息
      commmonList: [
        {
          name: '桃花园',
          id: 1,
          top: 52,
          left: 26,
          date: '2022/06/01',
          number: 11300
        },
        {
          name: '梨园',
          id: 1,
          top: 66,
          left: 30,
          date: '2022/06/01',
          number: 11301
        },
        {
          name: '枇杷园',
          id: 1,
          top: 57,
          left: 34,
          date: '2022/06/01',
          number: 11302
        },
        {
          name: '映山红',
          id: 1,
          top: 43,
          left: 34,
          date: '2022/06/01',
          number: 11303
        },
        {
          name: '云上漂流',
          id: 1,
          top: 30,
          left: 40,
          date: '2022/06/01',
          number: 11304
        },
        {
          name: '梅园',
          id: 1,
          top: 36,
          left: 52,
          date: '2022/06/01',
          number: 11304
        },
        {
          name: '山庄',
          id: 1,
          top: 74,
          left: 65,
          date: '2022/06/01',
          number: 11305
        },
        {
          name: '茶园',
          id: 1,
          top: 40,
          left: 67,
          date: '2022/06/01',
          number: 11306
        }
      ],
      commmonListtwo: [],
      // 位置特殊标识图片
      otherimgList: [
        { name: '停车场', top: 75, left: 33 },
        { name: '入口', top: 66, left: 23 },
        { name: '游客中心', top: 70, left: 19 },
        { name: '酒店', top: 63, left: 60 }
      ]
    }
  },
  watch: {
    nowselectbarId(newvalue) {
      if (newvalue) {
        this.showdiamet()
      }
    }
  },
  mounted() {
    this.showdiamet()
    this.getfaciltymes()
  },
  methods: {
    // 获取设施信息
    async getfaciltymes() {
      let url = 'cockpit-ensemble/v1/garden/query'
      const { data: res } = await axios.get(url, {
        cockpitAssemblyCode: 'CsBLrhATzV',
        dataSources: 1
      })
      if (res.length > 0) {
        res.forEach((a) => {
          a.date = this.$moment(a.date).format('MM/DD HH:mm')
        })
      }
      this.commmonListtwo = res || []
      this.commmonList = res || []
      this.diamessagetwoList = res || []

      console.log('背景信息', this.commmonListtwo)
    },
    showdiamet(e) {
      if (this.nowselectbarId === 10) {
        this.isshowdia = false
        this.isshowdiatwo = true
      } else if (e && e.top) {
        let maxwidth = document.body.clientWidth
        let maxheight = document.body.clientHeight
        const listone = JSON.parse(JSON.stringify(e))
        let listtwo = listone
        listtwo.top = (maxheight / 100) * listone.top - 100
        listtwo.left = (maxwidth / 100) * listone.left - 45
        this.diamessage = listtwo
        this.isshowdia = true
        this.isshowdiatwo = false
      } else {
        this.isshowdia = false
        this.isshowdiatwo = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.bakimg-view {
  width: 100vw;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  overflow: hidden;
  .bakimg-view-img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
  }
  .bakimg-main {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
    z-index: 4;
    overflow: hidden;
    .k1 {
      width: 41px;
      height: 113px;
      //   background-color: aqua;
      position: absolute;
      z-index: 5;
      background-image: url('../../assets/templeone/backimgone/k1.png');
      background-repeat: no-repeat;
      background-size: 41px 113px;
      cursor: pointer;
      .k1-line {
        width: 24px;
        margin-left: 8px;
        margin-top: 2px;
        height: 84px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        //   background-color: rgb(89, 92, 95);
        flex-wrap: nowrap;
        font-size: 14px;
        line-height: 17px;
        color: #01f8a6;
        text-align: center;
      }
    }
    .k2one {
      width: 54px;
      height: 97px;
      position: absolute;
      z-index: 5;
      background-image: url('../../assets/templeone/backimgone/k2one.png');
      background-repeat: no-repeat;
      background-size: 54px 97px;
    }
    .k2two {
      width: 75px;
      height: 104px;
      position: absolute;
      z-index: 5;
      background-image: url('../../assets/templeone/backimgone/k2two.png');
      background-repeat: no-repeat;
      background-size: 75px 104px;
    }
    .k3 {
      width: 70px;
      height: 24px;
      line-height: 24px;
      position: absolute;
      z-index: 5;
      border: #01f8a6 1px solid;
      font-size: 12px;
      color: #01f8a6;
      letter-spacing: 2px;
      text-align: center;
      white-space: nowrap;
    }
  }
  .service-view {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    overflow: hidden;
  }
}
</style>
